import React, {Component} from "react";
import {connect} from "react-redux";
import {Menu, Spin, Icon} from "antd";
import {listMenu} from '@apis/common'
import{hashHistory} from "react-router";
import {clearFormCache} from "@actions/common";
const {SubMenu} = Menu;

@connect((state, props) => ({
    config: state.config,
}))

export default class LeftMenu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            menuList: [],
            isLeftMenuMini: false,
            collapsed: false,
        }
        this.getMenuList = this.getMenuList.bind(this)
        this.renderMenu = this.renderMenu.bind(this)
        this.toggleLeftMenu = this.toggleLeftMenu.bind(this)
        this._handleClick = this._handleClick.bind(this)
    }

    componentWillMount() {
        // 左侧菜单初始化
        const isLeftMenuMini = JSON.parse(sessionStorage.getItem("isLeftMenuMini"))
        this.setState({
            isLeftNavMini: isLeftMenuMini,
            collapsed: isLeftMenuMini,
        })
        this.getMenuList()
    }

    toggleLeftMenu(){
        this.setState({
            isLeftMenuMini: !this.state.isLeftMenuMini,
            collapsed: !this.state.collapsed,
        }, () => {
            // console.log(this.state.isLeftNavMini)
            this.props.toggleLeftMenu(this.state.isLeftMenuMini)
        })
    }

    _handleClick = (e) => {
        this.props.dispatch(clearFormCache({}))
        hashHistory.push(`/${e.key}`)
    }

    getMenuList() {
        listMenu({}, res => {
            console.log(res)
            const menuList = (res.data && res.data[0]) ? res.data : []
            menuList.map(item => (
                item
            ))
            this.setState({
                menuList: menuList,
            })
            sessionStorage.setItem("menuList", JSON.stringify(menuList))
        })
    }

    renderMenu() {
        console.log(this.state)
        const {menuList} = this.state;
        console.log(menuList)
        if (!menuList || !menuList.length) return (<div></div>);
        const MenuItem = Menu.Item
        return menuList.map((item, index) => {
            if (!item.menuList || !item.menuList.length) {
                return (
                    <MenuItem key={item.menu_key ? item.menu_key : item.menu_id} name={item.menu_title}>
                        <i title={item.menu_title}/>
                         <span className="menu-name">{item.menu_title}</span>
                    </MenuItem>
                )
            }
            return (
                <SubMenu key={`key${index}`} title={
                    <span>
                        <span className="menu-name">{item.menu_title}</span>
                    </span>}>
                    {item.menuList.map(menu => (
                        <MenuItem key={menu.menu_key || menu.menu_id} name={menu.menu_title}>
                            <i title={menu.menu_title}/>
                            <span className="menu-name">{menu.menu_title}</span>
                        </MenuItem>
                    ))}
                </SubMenu>
            )
        })
    }

    render() {
        console.log(2)
        console.log(this.state.collapsed)
        return (
            <div className={this.state.isLeftMenuMini ? 'leftMenuMini' : ''}>
                <nav id="main-menu-container">
                    <div className="left-menu-control" onClick={() => this.toggleLeftMenu()}>
                        <i className="qqbicon qqbicon-menucontrol"/>
                    </div>
                    <Spin spinning={this.state.loading}>
                        <Menu onClick={this._handleClick}
                            theme="dark"
                            // openKeys={this.state.openKeys}
                            // onOpenChange={this._handleToggle}
                            // selectedKeys={this.leftMenuHighLight()}
                            // mode={this.state.isLeftMenuMini ? "inline" : 'vertical'}
                              mode="inline"
                              inlineIndent="12"
                              inlineCollapsed={this.state.collapsed}
                        >
                            {this.renderMenu()}
                        </Menu>
                    </Spin>
                </nav>
            </div>
        )
    }
}
